<template>
  <div
    :class="['state-box',
             {['state-box--state' + state]: typeof state === 'number'}]"
  />
</template>

<script>
export default {
  name: 'BillsStateImage',
  props: {
    state: {
      type: Number,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .state {
    &-box {
      background: url("../../assets/bills/billsState.png") no-repeat;
      width: 123px;
      height: 100px;
      position: absolute;
      left: 300px;
      top: 30px;

      &--state0 {
        background-position: 0 0;
      }

      &--state1 {
        background-position: 0 -124px;
      }

      &--state2 {
        background-position: 0 -247px;
      }

      &--state3 {
        background-position: 0 -371px;
      }

      &--state4 {
        background-position: 0 -495px;
      }

      &--state6 {
        background-position: 0 -618px;
      }
    }

  }
</style>
